<template>
    <body id="poster" style="background-image: url('./images/OIP-C (1).jpg');
        background-size: cover;">
      <el-form class="login-container" label-position="left" label-width="0px">
          <h3 class="login_title">
            <i class="el-icon-arrow-left" 
            style="position: relative; right: 120px;;" 
            @click="toshouye()"></i>
              系统登录
              <el-button size="mini" style="position: relative; left: 50px;" @click="toRegister()">注册
                  <i class="el-icon-arrow-right el-icon--right"></i>
              </el-button>
          </h3>
          <el-form-item>
              <el-input type="text" v-model="loginForm.username" aria-autocomplete="off" placeholder="用户名/邮箱地址"></el-input>
          </el-form-item>
          <el-form-item>
              <el-input type="password" v-model="loginForm.password" aria-autocomplete="off" placeholder="密码"></el-input>
          </el-form-item>
          <el-form-item style="width: 100%;">
              <el-button type="primary" style="width: 100%;background: #505458;border: none" @click="login">登录</el-button>
          </el-form-item>
      </el-form>
    </body>
  </template>
  
  <script>
  export default {
      name:'Login',
      data(){
          return{
              loginForm:{
                  username:'',
                  password:''
              },
              baseURL:'http://127.0.0.1:8000',
          }
      },
      methods:{
          login(){
              this.axios.post(this.baseURL+'/user/login/',this.loginForm)
              .then((resp) =>{
                  let data=resp.data;
                  if(resp.status==200){
                      this.loginForm = {};  //清理缓存
                      this.$message({
                      message: '登录成功!',
                      type: 'success'
                      });
                      localStorage.setItem("user",JSON.stringify(resp.data))
                      this.$router.push({path:'/home'})
                  }
              })
              
          },
          toRegister(){
              this.$router.push({path:'/Register'})
          },
          toshouye() {
            this.$router.push({path:'/'})
          }
      }
  }
  </script>
  
<style>
#poster{
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
    /*! autoprefixer: off */
    /* background:-webkit-gradient(linear, 100% 0, 0 0, from(#e3c5eb), to(#a9c1ed)); */
    /* background:-webkit-linear-gradient(left, #e6cfed,#b4c9ef); */
    /* autoprefixer: on */
}
body{
    margin: 0px;
    padding: 0px;
}
.login-container{
    border-radius: 15px;
    background-clip: padding-box;
    margin:160px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6cc;
}
.login_title{
    margin: 10px auto 40px auto;
    text-align: center;
    color: #505458;
    position: relative;
    left: 35px;
}
</style>
  